<template>
    <div class="container">
        <div class="content">
            <var-space justify="flex-end">
                <var-icon
                    v-if="!tipShow"
                    name="help-circle"
                    color="var(--color-warning)"
                    @click="tipShow = true"
                />
            </var-space>

            <var-alert
                v-if="tipShow"
                type="warning"
                title="公网系统脱敏说明"
                variant="outlined"
                closeable
                @close="tipShow = false"
            >
                <template #default>
                    <div style="width: 100%;" v-html="tip"></div>
                </template>
            </var-alert>
            <var-divider v-if="tipShow" />
            <var-form ref="formEl" scroll-to-error="start" @submit="handleSubmit">
                <var-space direction="column">
                    <var-row :gutter="[10, 10]">
                        <var-col :span="1" style="margin-top: 22px;">
                            <var-button size="mini" round @click="selectDir">
                                <var-icon name="arrow-up-bold-box-outline" />
                            </var-button>
                        </var-col>
                        <var-col :span="23">
                            <var-input
                                style="width: 100%;"
                                readonly
                                placeholder="请选择需要脱敏的文件路径"
                                :rules="v => !!v || '文件路径不能为空'"
                                v-model="formData.targetFilePath"
                            />
                        </var-col>
                    </var-row>
                    <var-row v-if="false" :gutter="[10, 10]">
                        <var-col :span="1" style="margin-top: 22px;">
                            <var-button size="mini" round @click="selectSaveDir">
                                <var-icon name="arrow-up-bold-box-outline" />
                            </var-button>
                        </var-col>
                        <var-col :span="formData.resultFilePath ? '22': '23'">
                            <var-input
                                style="width: 100%;"
                                readonly
                                placeholder="不指定存入地址则默认在当前目录下生成结果文件夹"
                                v-model="formData.resultFilePath"
                            />
                        </var-col>
                        <var-col :span="1" style="margin-top: 22px;">
                            <var-button
                                v-if="formData.resultFilePath"
                                type="primary"
                                size="mini"
                                @click="openDirectory(formData.resultFilePath)"
                            >打开</var-button>
                        </var-col>
                    </var-row>
                    <var-row :gutter="[10, 10]">
                        <var-col :span="4" :offset="16">
                            <var-button block type="danger" @click="formEl.reset()">清空</var-button>
                        </var-col>
                        <var-col :span="4">
                            <var-button block type="success" native-type="submit">开始处理</var-button>
                        </var-col>
                    </var-row>
                </var-space>
            </var-form>
            <var-divider description="替换配置 ↓" />
            <var-row style="align-items: center;">
                <var-col :span="6">
                    <var-select v-model="projectType" placeholder="选择项目" style="width: 100%;">
                        <var-option label="天津风控" />
                        <var-option label="烟台监理" />
                    </var-select>
                </var-col>
                <var-col :span="8" :offset="1">
                    <var-button type="primary" @click="getDictOption">获取配置文件</var-button>
                    <var-button
                        style="margin-left: 5px;"
                        type="warning"
                        @click="openDirectory('dictPath')"
                    >打开配置文件</var-button>
                </var-col>
                <var-col :span="3" :offset="6">
                    <var-chip type="success" :round="false" :offset="10">总数：{{ dictData.length }}</var-chip>
                </var-col>
            </var-row>
            <div style="max-height: calc(100% - 60vh); overflow: auto; margin-top: 10px;">
                <var-chip
                    :round="false"
                    v-for="(item, index) in dictData"
                    :key="index"
                    style="margin-right: 10px; margin-bottom: 10px;"
                    type="success"
                    plain
                >
                    <span>{{ item }}</span>
                </var-chip>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { ipc } from '@/utils/ipcRenderer'
import { ipcApiRoute } from '@/api/main.js'
import { ElLoading, ElMessage } from 'element-plus'

const tip = `<p>为规避风险，先需要对公司部署在公网的系统进行脱敏处理</p>
                <p>*以下关键字风险要规避</p>
                <p>(1)平台名称规避，不能通过平台名称直接能够判断出内部属于哪个专业的哪类业务，比如台区、变电、配电、输电、线路、杆塔、变压器等明显电网业务或者术语的尽量不用 <p>
                <p>(2)电压等级、线路名称、变压器、杆塔、设备位置(经纬度加密)、主业单位名称、标识等不能出现，必须出现的以字母代替</p>
                `
const tipShow = ref(true)
const formEl = ref(null)
const formData = ref({
    targetFilePath: "",
    resultFilePath: ""
})
const projectType = ref('天津风控')
const selectDir = () => {
    ipc.invoke(ipcApiRoute.selectFolder, '').then(r => {
        formData.value.targetFilePath = r
    })
}
const selectSaveDir = () => {
    ipc.invoke(ipcApiRoute.selectFolder, '').then(r => {
        formData.value.resultFilePath = r
    })
}
const openDirectory = (path) => {
    console.log("path", dictPath.value)
    if (path === 'dictPath') {
        if (dictPath.value) {
            ipc.invoke(ipcApiRoute.openDirectory, { path: dictPath.value }).then(r => { })
        } else {
            ElMessage.warning('资源不存在，请先读取配置')
        }
    }
    else {
        ElMessage.warning('路径不存在，无法打开')
    }
}
const dictPath = ref('')
const dictData = ref([])
const getDictOption = () => {
    ipc.invoke(ipcApiRoute.readFile, { dict: projectType.value }).then(r => {
        if (r && r.content) {
            dictPath.value = r.dictPath
            const data = JSON.parse(r.content)
            dictData.value = data.map(item => {
                return item.plaintext + ' => ' + item.ciphertext
            })
            replaceRules.value = data.map(item => {
                return {
                    from: item.plaintext,
                    to: item.ciphertext
                }
            })
        } else {
            dictData.value = []
            ElMessage.error(r.message || '读取配置失败')
        }
    })
}
onMounted(() => {
    getDictOption()
})
const replaceRules = ref([])
const handleSubmit = (valid) => {
    if (valid) {
        if (replaceRules.value.length === 0) {
            ElMessage.error('请先读取配置文件')
            return
        }
        const loading = ElLoading.service({ fullscreen: true, text: '处理中，请稍后...' })
        ipc.invoke(ipcApiRoute.desensitization, { ...formData.value, replaceRules: JSON.stringify(replaceRules.value) }).then(r => {
            loading.close()
            if (r && r.success) {
                ElMessage.success('处理成功!')
            } else {
                ElMessage.error(r.message || '处理失败，请稍后再试')
            }
        }).catch(() => {
            loading.close()
            ElMessage.error('处理失败，请稍后再试')
        })
    }
}

</script>

<style lang="less" scoped>
.container {
    height: 95vh;
    width: 98%;
    display: flex;
    justify-content: space-between;
    background-color: #dde3e9;
    margin-top: 10px;
    padding: 10px;
    .content {
        height: 100%;
        background-color: #fff;
        width: 100%;
        border-radius: 8px;
        padding: 10px;
        box-sizing: border-box;
        .info {
            height: calc(100% - 50px);
            overflow: auto;
        }
    }
}
</style>